<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
            name="viewport"
            content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>


    <style>
        .test_block{
         background-color: red;
         width: 100%;
         margin-top: 20px;
         line-height: 100px;
         text-align: center;

        }
    </style>

</head>

<body>

<img alt="" id="myImg" style="display: none;">
<video id="myVideo"  style="display: none;"></video>
<div class="test_block" id="message">弹出消息</div>
<div class="test_block" id="photo">拍照</div>
<div class="test_block" id="keyboard">弹出键盘 <input/></div>
<div class="test_block" id="wifi">获取wifi列表</div>
<div class="test_block" id="location">获取定位</div>
</body>
<script>

    window.jsBridge=window.jsBridge || {}
    //核心方法

    window.jsBridge.call=function (methodName,params,callBack){

        //全局唯一的方法名
        const winName=`win_func_${~~Math.random()*1000}`
        //定义一个全局的函数
        window[winName]=function (...args){
            if(callBack){
                callBack(...args)
            }

            //执行完了,直接删除这个全局函数
            delete window[winName]
        }
        if(window.HarmonyOS || window.HarmonyOS[methodName]){
            HarmonyOS[methodName](params,winName)//调用sdk方法
        }



    }


</script>
<script>
    document.querySelector("#message").onclick = () => {
        //HarmonyOS.showMessage("选择鸿蒙真")
        jsBridge.call("showMessage","选择鸿蒙真",()=>{
                    document.querySelector("#location").innerText=Math.random()*1000
        })

    }
    document.querySelector("#photo").onclick = () => {
       HarmonyOS.takePhoto('test')
    }
    document.querySelector("#keyboard").onclick = () => {
       //HarmonyOS.takeKeyboard('test')

       jsBridge.call("takeKeyboard","",()=>{

        })

   }
   document.querySelector("#wifi").onclick = () => {

   }
   document.querySelector("#location").onclick = () => {

   }
    function test(url){
       document.querySelector("#message").innerText=url
       if(url.indexOf("jpg")>-1){
                 document.querySelector("#myImg").src=url
                 document.querySelector("#myImg").style.display="block"
       }else if(url.indexOf('mp4')){
        document.querySelector("#myVideo").src=url
        document.querySelector("#myVideo").style.display="block"
       }
    }


</script>
</html>